<template>
  <div class="box" @click.self="shake">
    <transition name="fade" appear>
      <form class="login" :class="{ shake: isShak }">
        <div class="row1" key="">
          <div>
            <i class="iconfont icon-jiantou" style="font-size: 25px"></i>
          </div>
        </div>
        <div class="row2">
          <span>欢迎回来</span>
        </div>
        <div class="row3">
          <span>请填写以下信息进行登录</span>
        </div>
        <div class="row4">
          <span>用户名</span>
          <input
            type="text"
            name="userName"
            v-model.trim="userInfo.userName"
            @blur="check('userName')"
            @input="check('userName')"
          />
          <p v-if="errMesg.userName">{{ errMesg.userName }}</p>
        </div>
        <div class="row5">
          <span>密码</span>
          <input
            type="password"
            name="password"
            v-model.trim="userInfo.password"
            @blur="check('password')"
            @input="check('password')"
          />
          <p v-if="errMesg.password">{{ errMesg.password }}</p>
        </div>
        <div class="row6" @click="toLogin">登录</div>
      </form>
    </transition>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import axios from '@/utils/request'
import { useRouter } from 'vue-router'
const router = useRouter()
let isShak = ref(false)
let addShak = (function () {
  let time: any
  return function () {
    if (time) {
      return
    } else {
      isShak.value = true
      time = setTimeout(() => {
        isShak.value = false
        time = null
      }, 820)
    }
  }
})()

const shake = () => {
  if (userInfo.password && userInfo.userName) {
    return
  } else {
    addShak()
  }
}

let userInfo = reactive({
  userName: 'tinyxu',
  password: 'tinyxu1024',
})
let errMesg = reactive({
  userName: '',
  password: '',
})
let tips = reactive({
  userName: false,
  password: false,
})
const toLogin = async () => {
  if (tips.password && tips.userName) {
    try {
      let result = await axios.post('/admin', { ...userInfo })
      const token = result.data.token
      if (token) {
        localStorage.setItem('token', token)
        router.push('/home')
      } else {
        localStorage.setItem('token', 'custorm')
        router.push('/home')
        // ElMessage.error('登陆失败')
      }
    } catch (error) {
      ElMessage.error('登陆失败')
    }
  } else {
    ElMessage.error('信息填写不完整')
  }
}
const check = (name: string) => {
  if (name == 'userName') {
    if (userInfo.userName == '') {
      tips.userName = false
      errMesg.userName = '请填写用户名'
    } else {
      const reg = /^[A-Za-z0-9_\-\.\u4e00-\u9fa5]{4,20}$/
      let result = reg.test(userInfo.userName)
      if (result) {
        tips.userName = true
        errMesg.userName = ''
      } else {
        tips.userName = false
        errMesg.userName = '用户不少于4位'
      }
    }
  } else {
    if (userInfo.password == '') {
      tips.password = false
      errMesg.password = '请输入密码'
    } else {
      const reg = /^[\w]{6,40}$/
      let result = reg.test(userInfo.password)
      if (result) {
        tips.password = true
        errMesg.password = ''
      } else {
        tips.password = false
        errMesg.password = '密码至少为6位'
      }
    }
  }
}
</script>

<style scoped lang="less">
.fade-enter-from {
  top: -120% !important;
}

.fade-enter-active {
  transition: all 1.5s ease-in-out !important;
}

.fade-enter-to {
  top: 100px !important;
}

.box {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  user-select: none;

  .login {
    position: absolute;
    top: 100px;
    display: flex;
    flex-direction: column;
    width: 500px;
    height: 600px;
    padding: 25px 30px;
    background-color: #ffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    color: #303133;
    border-radius: 10px;
    box-sizing: border-box;
    transition: 0.6s;

    p {
      position: absolute;
      bottom: -40px;
      left: 0px;
      font-size: 14px;
      margin-top: 10px;
      color: #e41749;
    }

    input {
      padding: 15px 16px;
      border: none;
      border-radius: 6px;
      outline: none;
      background-color: #f3f3f4;
      transition: 0.2s;
      color: #303133;

      &:focus {
        outline: 1px solid #0478be;
      }

      &:hover {
        outline: 1px solid #0478be;
      }
    }

    .row1 {
      width: 100%;
      height: 35px;
      position: relative;

      div {
        display: flex;
        position: absolute;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 35px;
        border-radius: 4px;
        transition: 0.5s;
        transform: translateX(-20px);

        &:hover {
          background-color: var(--navBackgroudColor);
        }
      }
    }

    .row2 {
      display: flex;
      margin-top: 30px;
      margin-bottom: 10px;
      justify-content: space-between;
      height: 38px;

      span {
        color: var(--color);
        font-size: 26px;
        font-weight: 700;
      }

      a {
        width: 75px;
        height: 40px;
        border-radius: 4px;
        text-decoration: none;
        font-size: 16px;
        line-height: 40px;
        text-align: center;
        color: rgb(236, 88, 141);
        transition: 0.5s;

        &:hover {
          background-color: rgba(236, 88, 141, 0.1);
        }
      }
    }

    .row3 {
      font-size: 20px;
      font-weight: 600;
      color: #999;
    }

    .row4 {
      position: relative;
      display: flex;
      flex-direction: column;
      margin: 15px 0;

      span {
        font-size: 16px;
        font-weight: 700;
        margin: 10px 0;
      }
    }

    .row5 {
      position: relative;
      display: flex;
      flex-direction: column;
      margin: 15px 0;

      span {
        font-size: 16px;
        font-weight: 700;
        margin: 10px 0;
      }
    }

    .row6 {
      height: 50px;
      margin-top: 70px;
      color: #fff;
      background-color: #0478be;
      line-height: 50px;
      text-align: center;
      border-radius: 30px;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background-color: #178bd3;
      }
    }
  }
}

.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
</style>
